<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Purple Admin</title>
    <th:block th:replace="librarian/common :: head"></th:block>
</head>
<body>
  <div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->

      <div th:replace="librarian/common :: navbar"></div>

    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <div class="row row-offcanvas row-offcanvas-right">
        <!-- partial:../../partials/_sidebar.html -->
        <th:block th:replace="librarian/common :: sidebar"></th:block>
        <div class="content-wrapper">
          <div id="totalFine">
                    <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">Total Fine</h2>
            </div>
          </header>

          <button onclick="dailyBtn()" class="btn btn-success mr-2">Daily</button>
          <button onclick="weeklyBtn()" class="btn btn-success mr-2">Weekly</button>
          <button onclick="monthlyBtn()" class="btn btn-success mr-2">Monthly</button>
          
        </div>
        <div id="tablelar" class="class="col-12 grid-margin"">
<div class="card"><div class="card-body"><h4 class="card-tltle">Monthly Fine</h4><div class="table-responsive"><table class="table table-striped table-sm"><thead><tr><th>Date</th><th>Amount</th></tr></thead><tbody id="list"></tbody></table></div></div></div></div>
        </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->

      <div th:replace="librarian/common :: footer"></div>

        <!-- partial -->
      </div>
      <!-- row-offcanvas ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->

  <!-- plugins:js -->

  <div th:replace="librarian/common :: scripts"></div>
    <script>
        function getFormData(dic) {
            formData=new FormData();
            for (var key in dic)
                formData.append(key, dic[key]);
            return formData;
        }
    </script>

    <script>
      function dailyBtn(){
        $("#tablelar").empty();
        $("#tablelar").append(
          "<div class=\"card\"><div class=\"card-body\"><h4 class=\"card-tltle\">Daily Fine</h4><div class=\"table-responsive\"><table class=\"table table-striped table-sm\"><thead><tr><th>Date</th><th>Amount</th></tr></thead><tbody id=\"list\"></tbody></table></div></div></div></div>"
          );
                $.ajax({
            url: "/api/income/fine/day",
            type: "GET",
            dataType:'json',
            async: false, 

            success: function(resp){
              
                $.each(resp.data,
                function(i,values){
                    $('#list').append(
                       // "<tr><td>"+values.bookId+"</td></tr>"
                    "<tr><td>"+values.date+"</td>"
                    +"<td>"+values.amount+"</td></tr>"
                    );
                }
                   
                );
                  console.log(resp.data);
            }   
    });
      }
            function weeklyBtn(){
        $("#tablelar").empty();
        $("#tablelar").append(
          "<div class=\"card\"><div class=\"card-body\"><h4 class=\"card-tltle\">Weekly Fine</h4><div class=\"table-responsive\"><table class=\"table table-striped table-sm\"><thead><tr><th>Date</th><th>Amount</th></tr></thead><tbody id=\"list\"></tbody></table></div></div></div></div>"
          );
                        $.ajax({
            url: "/api/income/fine/week",
            type: "GET",
            dataType:'json',
            async: false, 

            success: function(resp){
              
                $.each(resp.data,
                function(i,values){
                    $('#list').append(
                       // "<tr><td>"+values.bookId+"</td></tr>"
                    "<tr><td>"+values.date+"</td>"
                    +"<td>"+values.amount+"</td></tr>"
                    );
                }
                   
                );
                  console.log(resp.data);
            }   
    });
      }
            function monthlyBtn(){
        $("#tablelar").empty();
        $("#tablelar").append(
          "<div class=\"card\"><div class=\"card-body\"><h4 class=\"card-tltle\">Monthly Fine</h4><div class=\"table-responsive\"><table class=\"table table-striped table-sm\"><thead><tr><th>Date</th><th>Amount</th></tr></thead><tbody id=\"list\"></tbody></table></div></div></div></div>"
          );
                        $.ajax({
            url: "/api/income/fine/month",
            type: "GET",
            dataType:'json',
            async: false, 

            success: function(resp){
              
                $.each(resp.data,
                function(i,values){
                    $('#list').append(
                       // "<tr><td>"+values.bookId+"</td></tr>"
                    "<tr><td>"+values.date+"</td>"
                    +"<td>"+values.amount+"</td></tr>"
                    );
                }
                   
                );
                  console.log(resp.data);
            }   
    });
      }
    </script>
    <script>                        
      $.ajax({
            url: "/api/income/fine/month",
            type: "GET",
            dataType:'json',
            async: false, 

            success: function(resp){
              
                $.each(resp.data,
                function(i,values){
                    $('#list').append(
                       // "<tr><td>"+values.bookId+"</td></tr>"
                    "<tr><td>"+values.date+"</td>"
                    +"<td>"+values.amount+"</td></tr>"
                    );
                }
                   
                );
                  console.log(resp.data);
            }   
    });
  </script>
</body>

</html>
